/**
 * Created by wei on 17/10/25.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import "../main.css";

class PageComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.showContent = this.showContent.bind(this);
        this.goToPage = this.goToPage.bind(this);
    }

    showContent(){

        var that = this;

        const {pageInfo} = this.props;
        let pageSize = pageInfo.pageSize;
        //后台分页从0开始
        let pageNumber = pageInfo.pageNumber+1;
        let totalPages = pageInfo.totalPages;
        let totalElements = pageInfo.totalElements;
        let first = pageInfo.first;
        let last = pageInfo.last;

        let backFirst = (<a onClick={()=>that.goToPage(0)} href="javascript:void(0);" className="btn1"><div style={{width:'50px'}}>回首页</div></a>);

        var dynamicPages = [];
        if(totalPages <= 10){
            for(var i=1; i<= totalPages; i++){
                dynamicPages.push(i);
            }
        }else{
            if(pageNumber <= 4){
                dynamicPages = [1,2,3,4,5,6,7];
            }else if(pageNumber >= totalPages-3){
                dynamicPages = [totalPages-6,totalPages-5,totalPages-4,totalPages-3,totalPages-2,totalPages-1,totalPages]
            }else{
                dynamicPages = [pageNumber-3,pageNumber-2,pageNumber-1,pageNumber,pageNumber+1,pageNumber+2,pageNumber+3]
            }
        }

        let pages = dynamicPages.map(function (v,index,arr) {
            if(v == pageNumber){
                return (<a onClick={()=>that.goToPage(v-1)} href="javascript:void(0);" className="btn1" style={{color:'white', backgroundColor:'#9b8878'}}><div style={{width:'50px'}}>第{v}页</div></a>);
            }
            return (<a onClick={()=>that.goToPage(v-1)} href="javascript:void(0);" className="btn1"><div style={{width:'50px'}}>第{v}页</div></a>);
        });

        let prePage;
        if(!first){
            prePage = (<a onClick={()=>that.goToPage(pageNumber-2)} href="javascript:void(0);" className="btn1"><div style={{width:'50px'}}>上一页</div></a>);
        }else{
            prePage = (<a  onClick={()=>that.goToPage(pageNumber-1)} href="javascript:void(0);" className="btn1"><div style={{width:'50px'}}>没有了</div></a>);
        }

        let lastPage;
        if(!last){
            lastPage = (<a onClick={()=>that.goToPage(pageNumber)} href="javascript:void(0);" className="btn1"><div style={{width:'50px'}}>下一页</div></a>);
        }else{
            lastPage = (<a  onClick={()=>that.goToPage(pageNumber-1)} href="javascript:void(0);" className="btn1"><div style={{width:'50px'}}>没有了</div></a>);
        }

        let diandian;
        if(totalPages >7){
            diandian = (<span style={{width:'60px', marginLeft:'10px', lineHeight:'25px'}}>...</span>);
        }

        return (
            <div>
                {backFirst}
                {pages}
                {diandian}
                {prePage}
                {lastPage}
            </div>
        );
    }

    goToPage(p){
        const {pageInfo,fnCallback} = this.props;
        pageInfo.pageNumber = p;
        fnCallback(pageInfo);
    }

    render() {

        return (
            this.showContent()
        );

    }
}



PageComponent.propTypes = {
    pageInfo: PropTypes.object.isRequired,

    // type: PropTypes.string.isRequired,
    fnCallback: PropTypes.func.isRequired,
};

export default PageComponent;